<script setup lang="ts">
import { UploadComponent } from '@/models/component';
import { inject } from "vue";
import * as injectKeys from "@/services/injectKeys";

const props = defineProps<{ model: UploadComponent }>()
const model = props.model

const dbServices = inject(injectKeys.dbKey)!



function onProgress(rawFile: UploadRawFile) {
    dbServices.uploadDbFile(rawFile)
    return false
}
</script>

<template>
    <div class="upload-box" :data-tag="model.tag">
        <el-upload drag :before-upload="onProgress">
            <div class="el-upload__text">
                把文件拖到这里 或者 <em>点击按钮</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    sqlite 数据库文件
                </div>
            </template>
        </el-upload>
    </div>
</template>

<style scoped>
.slicer-box {
    display: inline-block;
    min-width: 12rem;
    margin-right: 0.8rem;
}

.title {
    margin-bottom: 0.5rem;
}
</style>